<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ person.age }}---{{ age2 }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
  </div>

</template>
<script setup lang="ts">

import {reactive, toRef, toRefs} from "vue";

let person = reactive({
  name: '张三',
  age: 18
})
// let {name, age} = person   //不是响应式的
let {name, age} = toRefs(person)  //响应式
let age2 = toRef(person, 'age')

function changeName() {
  name.value = '张三123'
  console.log('name--------', name)
  console.log('person.name--------', person.name)
}

function changeAge() {
  person.age += 1
  age2.value += 1
}
</script>
<style scoped>
.person {
  background-color: #e7abab;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>